<template>
  <div class="app-container" style="margin:20px 50px;">
    <div class="total-layout">
      <el-row :gutter="20">
      </el-row>
    </div>
    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_order" class="total-icon">
            <div class="total-title">今日支付订单总数</div>
            <div class="total-value">{{ orders.today["count"] }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_today_amount" class="total-icon">
            <div class="total-title">今日销售总额</div>
            <div class="total-value">￥{{ orders.today.money ? orders.today.money : 0 }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <img :src="img_home_yesterday_amount" class="total-icon">
            <div class="total-title">昨日销售总额</div>
            <div class="total-value">￥{{ orders.yesterdayMoney }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-frame">
            <svg-icon icon-class="total-week" class="total-icon">
            </svg-icon>
            <div class="total-title">近7天销售总额</div>
            <div class="total-value">￥{{ orders.weekMoney }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="un-handle-layout">
      <div class="layout-title">待处理事务</div>
      <div class="un-handle-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待付款订单</span>
              <span style="float: right" class="color-danger">({{ orders.waitPay }})</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待确认收货订单</span>
              <span style="float: right" class="color-danger">({{ orders.waitOver }})</span>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="un-handle-item">
              <span class="font-medium">待发货订单</span>
              <span style="float: right" class="color-danger">({{ orders.waitDev }})</span>
            </div>
          </el-col>
        </el-row>


      </div>
    </div>
    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">商品总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="8" class="color-danger overview-item-value">{{ books.state0 }}</el-col>
                <el-col :span="8" class="color-danger overview-item-value">{{ books.state1 }}</el-col>
                <el-col :span="8" class="color-danger overview-item-value">{{ books.all }}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="8" class="overview-item-title">已下架</el-col>
                <el-col :span="8" class="overview-item-title">已上架</el-col>
                <el-col :span="8" class="overview-item-title">全部商品</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">用户总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{ users.today }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ users.yesterday }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ users.mounth }}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{ users.userCount }}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今日新增</el-col>
                <el-col :span="6" class="overview-item-title">昨日新增</el-col>
                <el-col :span="6" class="overview-item-title">本月新增</el-col>
                <el-col :span="6" class="overview-item-title">会员总数</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="statistics-layout">
      <div class="layout-title">订单统计</div>
      <el-row>

        <el-col :span="24">
          <div style="padding: 10px;border-left:1px solid #DCDFE6">
            <el-date-picker
              style="float: right;z-index: 1"
              size="small"
              v-model="orderCountDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleDateChange"
              :picker-options="pickerOptions">
            </el-date-picker>
            <div>
              <ve-line
                :data="chartData"
                :legend-visible="false"
                :loading="loading"
                :data-empty="dataEmpty"
                :settings="chartSettings"></ve-line>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {str2Date} from '@/utils/date';
import img_home_order from '@/assets/images/home_order.png';
import img_home_today_amount from '@/assets/images/home_today_amount.png';
import img_home_yesterday_amount from '@/assets/images/home_yesterday_amount.png';
import dayjs from 'dayjs'
import {homeInfo, orderDate} from "@/api/admin";

const DATA_FROM_BACKEND = {
  columns: ['date', 'orderCount', 'orderAmount'],
  rows: [
    {date: '2018-11-01', orderCount: 10, orderAmount: 1093},
    {date: '2018-11-02', orderCount: 20, orderAmount: 2230},
    {date: '2018-11-03', orderCount: 33, orderAmount: 3623},
    {date: '2018-11-04', orderCount: 50, orderAmount: 6423},
    {date: '2018-11-05', orderCount: 80, orderAmount: 8492},
    {date: '2018-11-06', orderCount: 60, orderAmount: 6293},
    {date: '2018-11-07', orderCount: 20, orderAmount: 2293},
    {date: '2018-11-08', orderCount: 60, orderAmount: 6293},
    {date: '2018-11-09', orderCount: 50, orderAmount: 5293},
    {date: '2018-11-10', orderCount: 30, orderAmount: 3293},
    {date: '2018-11-11', orderCount: 20, orderAmount: 2293},
    {date: '2018-11-12', orderCount: 80, orderAmount: 8293},
    {date: '2018-11-13', orderCount: 100, orderAmount: 10293},
    {date: '2018-11-14', orderCount: 10, orderAmount: 1293},
    {date: '2018-11-15', orderCount: 40, orderAmount: 4293}
  ]
};
export default {
  name: 'home',
  data() {
    return {
      // el-ui 日期组件 参数
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const start = new Date(dayjs().subtract(7, 'day')); //减少时间并返回一个新的 Dayjs() 对象
            const end = new Date(dayjs())
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一月',
          onClick(picker) {
            const start = new Date(dayjs().subtract(1, 'month'));
            const end = new Date(dayjs())
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 日期
      orderCountDate: '',
      chartSettings: {
        xAxisType: 'time',
        area: true,
        axisSite: {right: ['orderAmount']},
        labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}
      },
      chartData: {
        columns: [],
        rows: []
      },
      saleData: [],
      orders: {},
      users: {},
      books: {},
      loading: false,
      dataEmpty: false,
      img_home_order,
      img_home_today_amount,
      img_home_yesterday_amount
    }
  },
  created() {
    this.initOrderCountDate();
    this.getData();
  },
  methods: {
    orderHistory() {
      const params = {
        start: dayjs(this.orderCountDate[0]).format('YYYY-MM-DD'),
        // start:this.orderCountDate[0],
        // end:this.orderCountDate[1]
        end: dayjs(this.orderCountDate[1]).format('YYYY-MM-DD')
      }

      orderDate(params).then(
        res => {
          this.saleData = res.data
          setTimeout(() => {
            this.chartData = {
              columns: ['date', 'orderCount', 'orderAmount'],
              rows: []
            };
            for (let i = 0; i < this.saleData.length; i++) {
              let item = this.saleData[i];
              let currDate = new Date(dayjs(item.date));
              let start = this.orderCountDate[0];
              let end = this.orderCountDate[1];
              if (currDate.getTime() >= start.getTime() && currDate.getTime() <= end.getTime()) {
                //  给图表推送数据
                this.chartData.rows.push(item);
              }
            }
            this.dataEmpty = false;
            this.loading = false
          }, 1000)
        }
      )
    },
    handleDateChange() {
      if (this.orderCountDate[1] > new Date())
        console.log('结束日期超过今天')
      this.orderHistory()
    },
    initOrderCountDate() {
      let start = new Date(dayjs().subtract(7, 'day'));
      const end = new Date(dayjs())
      // end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7);
      this.orderCountDate = [start, end];
    },
    getData: async function () {
      await homeInfo().then(res => {
        this.orders = res.data.order
        this.books = res.data.book
        this.users = res.data.user
        this.saleData = this.orders.weekDetails
      })
      setTimeout(() => {
        this.chartData = {
          columns: ['date', 'orderCount', 'orderAmount'],
          rows: []
        };
        for (let i = 0; i < this.saleData.length; i++) {
          let item = this.saleData[i];
          let currDate = new Date(dayjs(item.date));
          let start = this.orderCountDate[0];
          let end = this.orderCountDate[1];
          if (currDate.getTime() >= start.getTime() && currDate.getTime() <= end.getTime()) {
            //  给图表推送数据
            this.chartData.rows.push(item);
          }
        }
        this.dataEmpty = false;
        this.loading = false
      }, 1000)
    }
  }
}
</script>

<style scoped>
.app-container {
  margin-top: 40px;
  margin-left: 120px;
  margin-right: 120px;
}

.address-layout {
}

.total-layout {
  margin-top: 20px;
}

.total-frame {
  border: 1px solid #DCDFE6;
  padding: 20px;
  height: 100px;
}

.total-icon {
  color: #409EFF;
  width: 60px;
  height: 60px;
}

.total-title {
  position: relative;
  font-size: 16px;
  color: #909399;
  left: 70px;
  top: -50px;
}

.total-value {
  position: relative;
  font-size: 18px;
  color: #606266;
  left: 70px;
  top: -40px;
}

.un-handle-layout {
  margin-top: 20px;
  border: 1px solid #DCDFE6;
}

.layout-title {
  color: #606266;
  padding: 15px 20px;
  background: #F2F6FC;
  font-weight: bold;
}

.un-handle-content {
  padding: 20px 40px;
}

.un-handle-item {
  border-bottom: 1px solid #EBEEF5;
  padding: 10px;
}

.overview-layout {
  margin-top: 20px;
}

.overview-item-value {
  font-size: 24px;
  text-align: center;
}

.overview-item-title {
  margin-top: 10px;
  text-align: center;
}

.out-border {
  border: 1px solid #DCDFE6;
}

.statistics-layout {
  margin-top: 20px;
  border: 1px solid #DCDFE6;
}

.mine-layout {
  position: absolute;
  right: 140px;
  top: 107px;
  width: 250px;
  height: 235px;
}

.address-content {
  padding: 20px;
  font-size: 18px
}
</style>
